<template>
	<view class="getheader">
		<view class="mix-page-header" v-if="headertype == 'index'">
			<view class="contents row">
				<view class="btn center">
					<text class="mix-icon icon-hengxiangliebiao getwhite"></text>
					<view class="msg"></view>
				</view>
				<view class="search-wrap center">
					<text class="mix-icon icon-sousuo"></text>
					<text>认真输入关键字进行搜索</text>
				</view>
				<view class="btn center">
					<text class="mix-icon icon-xiaoxi getwhite"></text>
				</view>
			</view>
		</view>

		<view class="mix-page-header" v-if="headertype == 'lists'">
			<view class="contents row">
				<view class="btn center" @click="navBack()">
					<text class="mix-icon icon-fanhui getwhite"></text>
				</view>
				<view class="search-wrap center">
					<text class="mix-icon icon-sousuo"></text>
					<text>认真输入关键字进行搜索</text>
				</view>
				<view class="btn center">
					<text class="mix-icon icon-xiaoxi getwhite"></text>
				</view>
			</view>
		</view>


		<view v-if="headertype == 'detail'" class="mix-page-header row">
			<view class="btn center" @click="navBack()">
				<text class="mix-icon icon-xiangzuo dark"></text>
			</view>
		</view>


		<view v-if="headertype == 'de111tail'">
			<view><text class="mix-icon icon-fanhui"></text></view>
			<view><text class="mix-icon icon-fanhui"></text></view>
			<view><text class="mix-icon icon-fanhui"></text></view>
			<view><text class="mix-icon icon-fanhui"></text></view>
			<view><text class="mix-icon icon-fanhui"></text></view>
			<view>
				<text class="mix-icon icon-fanhui"></text>
				<text class="mix-icon icon-shoujihaoma"></text>
				<text class="mix-icon icon-close"></text>
				<text class="mix-icon icon-xingbie-nv"></text>
				<text class="mix-icon icon-wuliuyunshu"></text>
				<text class="mix-icon icon-jingpin"></text>
				<text class="mix-icon icon-zhangdanmingxi01"></text>
				<text class="mix-icon icon-tixian1"></text>
				<text class="mix-icon icon-chongzhi"></text>
				<text class="mix-icon icon-wodezhanghu_zijinjilu"></text>
				<text class="mix-icon icon-tixian"></text>
				<text class="mix-icon icon-qianbao"></text>
				<text class="mix-icon icon-guanbi1"></text>
				<text class="mix-icon icon-daipingjia"></text>
				<text class="mix-icon icon-daifahuo"></text>
				<text class="mix-icon icon-yue"></text>
				<text class="mix-icon icon-wxpay"></text>
				<text class="mix-icon icon-alipay"></text>
				<text class="mix-icon icon-tishi"></text>
				<text class="mix-icon icon-shoucang-1"></text>
				<text class="mix-icon icon-gouwuche"></text>
				<text class="mix-icon .icon-shoucang"></text>
				<text class="mix-icon icon-home"></text>
				<text class="mix-icon icon-bangzhu1"></text>
			</view>

			<view>
				<text class="mix-icon icon-xingxing"></text>
				<text class="mix-icon icon-shuxiangliebiao"></text>
				<text class="mix-icon icon-hengxiangliebiao"></text>
				<text class="mix-icon icon-guanbi2"></text>
				<text class="mix-icon icon-down"></text>
				<text class="mix-icon icon-arrow-top"></text>
				<text class="mix-icon icon-xiaoxi"></text>
				<text class="mix-icon icon-saoma"></text>
				<text class="mix-icon icon-dizhi1"></text>
				<text class="mix-icon icon-ditu-copy"></text>
				<text class="mix-icon icon-lajitong"></text>
				<text class="mix-icon icon-bianji"></text>
				<text class="mix-icon icon-yanzhengma1"></text>
				<text class="mix-icon icon-yanjing"></text>
				<text class="mix-icon icon-mima"></text>
				<text class="mix-icon icon-biyan"></text>
				<text class="mix-icon icon-iconfontweixin"></text>
				<text class="mix-icon icon-shouye"></text>
				<text class="mix-icon icon-daifukuan"></text>
				<text class="mix-icon icon-pinglun-copy"></text>
				<text class="mix-icon icon-lishijilu"></text>
				<text class="mix-icon icon-shoucang_xuanzhongzhuangtai"></text>
				<text class="mix-icon icon-share"></text>
			</view>

			<view>
				<text class="mix-icon icon-shezhi1"></text>
				<text class="mix-icon icon-shouhoutuikuan"></text>
				<text class="mix-icon icon-dizhi"></text>
				<text class="mix-icon icon-yishouhuo"></text>
				<text class="mix-icon icon-xuanzhong"></text>
				<text class="mix-icon icon-xiangzuo"></text>
				<text class="mix-icon icon-iconfontxingxing"></text>
				<text class="mix-icon icon-jia2"></text>
				<text class="mix-icon icon-sousuo"></text>
				<text class="mix-icon icon-xiala"></text>
				<text class="mix-icon icon-xia"></text>
				<text class="mix-icon icon--jianhao"></text>
				<text class="mix-icon .icon-you"></text>
				<text class="mix-icon icon-yk_yuanquan"></text>
				<text class="mix-icon icon-xing"></text>
				<text class="mix-icon icon-guanbi"></text>
				<text class="mix-icon icon-loading"></text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'getheader',
		data() {
			return {

			};
		},
		props: {
			headertype: {
				type: String,
				default: 'index'
			}
		},
		computed: {

		},
		methods: {
			navBack() {
				uni.navigateBack();
			}
		}
	}
</script>


<style scoped lang="scss">
	.contents {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: $base-color;
	}

	.content {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: $white;
	}


	.btn {
		width: 10%;
		height: 11.5vw;
		padding: 1vw 2vw;
		position: relative;

		.mix-icon {
			font-size: 5vw;
			color: $lightgray;
		}

		.getwhite {
			color: $white;
		}

		.msg {
			position: absolute;
			right: 1vw;
			top: 1vw;
			width: 5%;
			height: 2vw;
			background-color: $base-color;
			border: 0.1vw solid $base-color;
			border-radius: 2vw;
			opacity: 0;

			&.show {
				opacity: 1;
			}
		}
	}

	.search-wrap {
		flex: 1;
		font-size: 3vw;
		color: $lightgray;
		border-radius: 4vw;
		background-color: $lightgrayback;
		height: 7.5vw;
		.icon-sousuo {
			margin: 0 1% 0 0;
			font-size: 4vw;
			color: $lightgray;
		}
	}


	.mix-page-header {
		position: fixed;
		left: 0;
		top: 2vw;
		z-index: 90;
		justify-content: space-between;
		width: 100%;
	}

	.btn {
		width: 15%;
	}

	.icon-xiangzuo {
		width: 7.5vw;
		height: 7.5vw;
		border-radius: 100rpx;
		font-size: 4vw;
		color: $darkblack;
		text-align: center;
		line-height: 7.5vw;

		&.dark {
			background-color: rgba(0, 0, 0, .5);
			color: $white;
		}
	}
</style>
